<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>武夷学院图书馆学生管理委员会 | 招新专区</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1a4b8c', // 主色调：深蓝色
                        secondary: '#e9c46a', // 辅助色：金色
                        accent: '#2a9d8f', // 强调色：绿色
                        departments: {
                            'news': '#3d5a80', // 新闻部：海洋蓝
                            'office': '#e9c46a', // 办公室：金色
                            'publicity': '#f4a261', // 宣传部：橙色
                            'media': '#e76f51', // 媒体部：红色
                            'supervision': '#2a9d8f', // 督查部：绿色
                            'culture': '#9b5de5', // 文化推广部：紫色
                        }
                    },
                    fontFamily: {
                        sans: ['Microsoft YaHei', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .bg-grid {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23f0f8ff'/%3E%3Cpath d='M20,20 Q40,5 60,20 T100,20 M20,50 Q40,35 60,50 T100,50 M20,80 Q40,65 60,80 T100,80' stroke='%23d1e8ff' stroke-width='1' fill='none'/%3E%3C/svg%3E");
            }
            .animate-fade-in {
                animation: fadeIn 0.6s ease-out forwards;
            }
            .department-card-hover {
                @apply transition-all duration-300 hover:-translate-y-2 hover:shadow-xl;
            }
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(20px); }
                to { opacity: 1; transform: translateY(0); }
            }
            .modal-fade-in {
                animation: modalFadeIn 0.3s ease-out forwards;
            }
            .modal-fade-out {
                animation: modalFadeOut 0.3s ease-in forwards;
            }
            .image-slide-in {
                animation: imageSlideIn 0.3s ease-out forwards;
            }
            @keyframes modalFadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            @keyframes modalFadeOut {
                from { opacity: 1; }
                to { opacity: 0; }
            }
            @keyframes imageSlideIn {
                from { transform: translateY(20px); opacity: 0; }
                to { transform: translateY(0); opacity: 1; }
            }
            .image-container {
                @apply overflow-hidden rounded-lg mb-4 transition-all duration-500 hover:shadow-lg;
            }
            .modal-content {
                @apply bg-white rounded-xl shadow-2xl max-w-5xl w-full max-h-[90vh] overflow-auto;
            }
            .modal-image {
                @apply w-full h-auto object-contain cursor-pointer transition-transform duration-300 hover:scale-105;
            }
            .modal-close {
                @apply absolute top-4 right-4 w-10 h-10 rounded-full bg-white/80 flex items-center justify-center text-primary hover:bg-white transition-colors duration-300 shadow-lg z-10;
            }
            .modal-title {
                @apply text-2xl md:text-3xl font-bold mb-4 pb-2 border-b border-gray-200;
            }
            .modal-desc {
                @apply mb-6 text-gray-700;
            }
            .gallery-container {
                @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4;
            }
            .gallery-item {
                @apply cursor-pointer transition-transform duration-300 hover:scale-105;
            }
            .active-image {
                @apply border-2 border-secondary;
            }
        }
    </style>
</head>
<body class="bg-white bg-grid bg-opacity-80 bg-cover bg-fixed text-gray-800">
    <!-- 顶部导航栏 -->
    <header class="bg-primary text-white shadow-md sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-3">
                <div class="w-12 h-12 rounded-full bg-secondary flex items-center justify-center text-primary font-bold text-xl">WY</div>
                <h1 class="text-xl md:text-2xl font-bold">武夷学院图书馆学生管理委员会</h1>
            </div>
            
            <!-- 桌面导航 -->
            <nav class="hidden md:flex space-x-6">
                <a href="#home" class="px-4 py-2 rounded-md hover:bg-white/20 transition-all duration-300 font-medium">首页</a>
                <a href="#departments" class="px-4 py-2 rounded-md hover:bg-white/20 transition-all duration-300 font-medium">部门介绍</a>
                <a href="#activities" class="px-4 py-2 rounded-md hover:bg-white/20 transition-all duration-300 font-medium">活动展示</a>
                <a href="#team-building" class="px-4 py-2 rounded-md hover:bg-white/20 transition-all duration-300 font-medium">团建风采</a>
                <a href="#recruitment" class="px-4 py-2 rounded-md hover:bg-white/20 transition-all duration-300 font-medium">招新详情</a>
                <a href="#contact" class="px-4 py-2 rounded-md hover:bg-white/20 transition-all duration-300 font-medium">加入我们</a>
                <a href="https://lib.wuyiu.edu.cn/" target="_blank" class="px-4 py-2 rounded-md hover:bg-white/20 transition-all duration-300 font-medium">
                    图书馆介绍 <i class="fa fa-external-link ml-1 text-xs"></i>
                </a>
            </nav>
            
            <!-- 移动端菜单按钮 -->
            <button id="mobile-menu-button" class="md:hidden text-2xl">
                <i class="fa fa-bars"></i>
            </button>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-primary/95 backdrop-blur-sm shadow-lg animate-fade-in">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
                <a href="#home" class="px-4 py-2 rounded-md hover:bg-white/20 transition-all duration-300 font-medium">首页</a>
                <a href="#departments" class="px-4 py-2 rounded-md hover:bg-white/20 transition-all duration-300 font-medium">部门介绍</a>
                <a href="#activities" class="px-4 py-2 rounded-md hover:bg-white/20 transition-all duration-300 font-medium">活动展示</a>
                <a href="#team-building" class="px-4 py-2 rounded-md hover:bg-white/20 transition-all duration-300 font-medium">团建风采</a>
                <a href="#recruitment" class="px-4 py-2 rounded-md hover:bg-white/20 transition-all duration-300 font-medium">招新详情</a>
                <a href="#contact" class="px-4 py-2 rounded-md hover:bg-white/20 transition-all duration-300 font-medium">加入我们</a>
                <a href="https://lib.wuyiu.edu.cn/" target="_blank" class="px-4 py-2 rounded-md hover:bg-white/20 transition-all duration-300 font-medium">
                    图书馆介绍 <i class="fa fa-external-link ml-1 text-xs"></i>
                </a>
            </div>
        </div>
    </header>
    <main class="container mx-auto px-4 py-8">
        <!-- 英雄区域 -->
        <section id="home" class="relative mb-12 overflow-hidden rounded-2xl shadow-2xl">
            <div class="absolute inset-0 bg-gradient-to-r from-primary/80 to-accent/70 z-10"></div>
            <img src="images/xueguanhui.jpg" alt="武夷学院图书馆" class="w-full h-80 md:h-96 object-cover">
            <div class="absolute inset-0 flex items-center justify-center z-20 text-white text-center px-6">
                <div>
                    <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-4 text-shadow animate-fade-in">武夷学院图书馆学生管理委员会</h1>
                    <p class="text-[clamp(1rem,2vw,1.25rem)] mb-8 max-w-2xl mx-auto animate-fade-in" style="animation-delay: 0.2s">
                        2025年招新季 | 期待与你一起成长
                    </p>
                    <a href="#departments" class="inline-block bg-secondary hover:bg-secondary/90 text-primary font-bold py-3 px-8 rounded-full shadow-lg transform hover:scale-105 transition-all duration-300 animate-fade-in" style="animation-delay: 0.4s">
                        探索部门 <i class="fa fa-arrow-right ml-2"></i>
                    </a>
                </div>
            </div>
        </section>
        <!-- 概览部分 -->
        <section class="bg-white/90 rounded-xl shadow-lg p-6 md:p-8 mb-12 animate-fade-in">
            <h2 class="text-2xl md:text-3xl font-bold text-primary mb-6 pb-4 border-b-4 border-secondary relative">
                我们是谁？
                <span class="absolute bottom-0 left-0 w-16 h-1 bg-accent"></span>
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="md:col-span-2">
                    <p class="mb-4 text-lg">武夷学院图书馆学生管理委员会，是在学校党委悉心领导、校团委亲切指导下，由全校学生共同参与建设的学生组织。作为连接学校与学生的桥梁纽带，我们始终坚守在服务同学的第一线。</p>
                    <p class="text-lg">秉持着"自我教育、自我管理、自我服务"的优良传统，学管会以"全心全意为同学服务"为宗旨，在促进学生成长成才、助力学校改革发展的道路上不断前行。我们致力于营造良好的学习氛围，丰富校园文化生活，让每一位同学都能在图书馆的滋养中收获知识与成长。</p>
                </div>
                <div class="flex flex-col justify-center items-center">
                    <div class="bg-primary/5 p-6 rounded-xl text-center">
                        <div class="text-4xl font-bold text-primary mb-2">6</div>
                        <p class="text-gray-600">个职能部门</p>
                    </div>
                    <div class="bg-primary/5 p-6 rounded-xl text-center mt-4">
                        <div class="text-4xl font-bold text-primary mb-2">120+</div>
                        <p class="text-gray-600">成员规模</p>
                    </div>
                    <div class="bg-primary/5 p-6 rounded-xl text-center mt-4">
                        <div class="text-4xl font-bold text-primary mb-2">15+</div>
                        <p class="text-gray-600">年度活动</p>
                    </div>
                </div>
            </div>
        </section>
        <!-- 部门展示 -->
        <section id="departments" class="bg-white/90 rounded-xl shadow-lg p-6 md:p-8 mb-12 animate-fade-in">
            <h2 class="text-2xl md:text-3xl font-bold text-primary mb-6 pb-4 border-b-4 border-secondary relative">
                六大部门，总有适合你的舞台
                <span class="absolute bottom-0 left-0 w-16 h-1 bg-accent"></span>
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 新闻部 -->
                <div class="department-card group rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer" data-name="新闻部" data-img="https://picsum.photos/seed/news/600/400" data-desc="新闻部是学管会的宣传喉舌，负责图书馆各类活动的新闻采编与报道工作。我们用文字记录校园文化，用镜头捕捉精彩瞬间，通过撰写高质量的新闻稿件和编辑推荐好书，传播图书馆的声音，展现师生风采。" data-color="departments.news" data-gallery="[
                    &quot;https://picsum.photos/seed/news1/800/1200&quot;,
                    &quot;https://picsum.photos/seed/news2/800/1200&quot;,
                    &quot;https://picsum.photos/seed/news3/800/1200&quot;
                ]" data-desc-details="新闻部是学管会的宣传喉舌，负责图书馆各类活动的新闻采编与报道工作。我们用文字记录校园文化，用镜头捕捉精彩瞬间，通过撰写高质量的新闻稿件和编辑推荐好书，传播图书馆的声音，展现师生风采。
                <p>日常工作任务：撰写图书馆活动新闻稿、编辑好书推荐专栏、运营图书馆官方媒体平台的文字内容、协助其他部门完成宣传文案策划。在这里，你可以锻炼文字表达能力、提升新闻敏感度、学习采访技巧，还能第一时间参与图书馆的各类活动。</p>
                
                <p>小福利：优先参与图书馆组织的读书活动和讲座；有机会与校内知名教师和学者面对面交流；你的文章将有机会在校内媒体平台发表；提升你的写作和沟通能力，为未来的职业发展打下坚实基础。">
                    <div class="h-48 overflow-hidden relative">
                        <div class="absolute inset-0 bg-gradient-to-t from-[#3d5a80]/80 to-transparent z-10"></div>
                        <img src="https://picsum.photos/seed/news/600/400" alt="新闻部" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                        <div class="absolute bottom-0 left-0 z-20 p-4 text-white">
                            <h3 class="text-xl font-bold">新闻部</h3>
                            <p class="text-white/80">宣传喉舌</p>
                        </div>
                    </div>
                    <div class="p-5 bg-white">
                        <div class="flex justify-between items-center mb-3">
                            <div class="flex space-x-2">
                                <span class="bg-[#3d5a80]/10 text-[#3d5a80] px-3 py-1 rounded-full text-sm">文字功底</span>
                                <span class="bg-[#3d5a80]/10 text-[#3d5a80] px-3 py-1 rounded-full text-sm">新闻敏感</span>
                            </div>
                            <span class="text-sm text-gray-500">适合人群：热爱写作、关注校园动态</span>
                        </div>
                        <p class="text-gray-600">负责新闻采编、好书推荐、宣传文案撰写，是学管会的"笔杆子"。</p>
                    </div>
                </div>
                
                <!-- 办公室 -->
                <div class="department-card group rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer" data-name="办公室" data-img="images/Image_192134958179463.jpg" data-desc="办公室是学管会的综合协调部门，主要负责文件起草、会议组织、物资管理、财务管理等工作。协助主席团开展日常工作，协调各部门之间的关系，保障学管会工作的正常运转。" data-color="departments.office" data-gallery="[
                    &quot;images/offer.jpg&quot;,
                    &quot;images/bangongshi1.jpg&quot;,
                    &quot;images/bangongshi2.jpg&quot;
                ]" data-desc-details="办公室是学管会的综合协调部门，主要负责文件起草、会议组织、物资管理、财务管理等工作。协助主席团开展日常工作，协调各部门之间的关系，保障学管会工作的正常运转。
                <p>日常工作任务：统筹协调，上传下达，包括采购、打印奖状/工作证明等；几乎所有活动都有办公室保驾护航的身影；值班任务相对轻松，一周一次，一次是一早上或者一下午(若有课，可以先行离开上课，并不要求完全一整个时间段都必须在)。</p>
                
                <p>小福利：期末期间，图书馆复习无需抢座，有两个办公室可以进行复习；有机会参与图书馆的管理工作，学习组织协调和团队管理能力；与图书馆老师和学管会各部门成员建立良好的关系；获得更多的社会实践经验和综合素质的提升。">
                    <div class="h-48 overflow-hidden relative">
                        <div class="absolute inset-0 bg-gradient-to-t from-[#e9c46a]/80 to-transparent z-10"></div>
                        <img src="images/Image_192134958179463.jpg" alt="办公室" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                        <div class="absolute bottom-0 left-0 z-20 p-4 text-white">
                            <h3 class="text-xl font-bold">办公室</h3>
                            <p class="text-white/80">综合协调</p>
                        </div>
                    </div>
                    <div class="p-5 bg-white">
                        <div class="flex justify-between items-center mb-3">
                            <div class="flex space-x-2">
                                <span class="bg-[#e9c46a]/10 text-[#e9c46a] px-3 py-1 rounded-full text-sm">组织能力</span>
                                <span class="bg-[#e9c46a]/10 text-[#e9c46a] px-3 py-1 rounded-full text-sm">细心负责</span>
                            </div>
                            <span class="text-sm text-gray-500">适合人群：做事有条理、善于沟通</span>
                        </div>
                        <p class="text-gray-600">负责文件管理、物资采购、会议组织，是学管会的"大管家"。</p>
                    </div>
                </div>
                
                <!-- 宣传部 -->
                <div class="department-card group rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer" data-name="宣传部" data-img="https://picsum.photos/seed/publicity/600/400" data-desc="宣传部是学管会的创意核心，负责设计制作各类宣传物料，包括海报、宣传单页、活动视频等。用创意和设计为学管会的各项活动打造视觉形象，吸引更多同学的关注和参与。" data-color="departments.publicity" data-gallery="[
                    &quot;https://picsum.photos/seed/publicity1/800/1200&quot;,
                    &quot;https://picsum.photos/seed/publicity2/800/1200&quot;,
                    &quot;https://picsum.photos/seed/publicity3/800/1200&quot;
                ]" data-desc-details="宣传部是学管会的创意核心，负责设计制作各类宣传物料，包括海报、宣传单页、活动视频等。用创意和设计为学管会的各项活动打造视觉形象，吸引更多同学的关注和参与。
                <p>日常工作任务：设计制作活动海报、宣传单页、展板、视频等宣传物料；运营图书馆官方社交媒体平台的视觉内容；协助其他部门完成相关设计工作。在这里，你可以发挥你的创意和设计才能，学习专业的设计软件，提升你的审美水平和设计能力。</p>
                
                <p>小福利：免费使用图书馆的设计设备和软件；有机会参与校内外各类设计比赛；与志同道合的设计爱好者交流学习；你的设计作品将有机会在校内广泛传播，提升你的知名度和影响力。">
                    <div class="h-48 overflow-hidden relative">
                        <div class="absolute inset-0 bg-gradient-to-t from-[#f4a261]/80 to-transparent z-10"></div>
                        <img src="https://picsum.photos/seed/publicity/600/400" alt="宣传部" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                        <div class="absolute bottom-0 left-0 z-20 p-4 text-white">
                            <h3 class="text-xl font-bold">宣传部</h3>
                            <p class="text-white/80">创意设计</p>
                        </div>
                    </div>
                    <div class="p-5 bg-white">
                        <div class="flex justify-between items-center mb-3">
                            <div class="flex space-x-2">
                                <span class="bg-[#f4a261]/10 text-[#f4a261] px-3 py-1 rounded-full text-sm">设计能力</span>
                                <span class="bg-[#f4a261]/10 text-[#f4a261] px-3 py-1 rounded-full text-sm">创意灵感</span>
                            </div>
                            <span class="text-sm text-gray-500">适合人群：热爱设计、有审美能力</span>
                        </div>
                        <p class="text-gray-600">负责海报设计、视频制作、活动宣传，是学管会的"设计师"。</p>
                    </div>
                </div>
                
                <!-- 媒体部 -->
                <div class="department-card group rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer" data-name="媒体部" data-img="https://picsum.photos/seed/media/600/400" data-desc="媒体部是学管会的技术担当，负责活动的摄影、摄像、后期制作以及图书馆官方网站和社交媒体平台的运营维护。用镜头记录精彩瞬间，用技术传播校园文化。" data-color="departments.media" data-gallery="[
                    &quot;https://picsum.photos/seed/media1/800/1200&quot;,
                    &quot;https://picsum.photos/seed/media2/800/1200&quot;,
                    &quot;https://picsum.photos/seed/media3/800/1200&quot;
                ]" data-desc-details="媒体部是学管会的技术担当，负责活动的摄影、摄像、后期制作以及图书馆官方网站和社交媒体平台的运营维护。用镜头记录精彩瞬间，用技术传播校园文化。
                <p>日常工作任务：活动摄影、摄像；视频剪辑和后期制作；图书馆官方网站和社交媒体平台的内容更新和维护；协助其他部门完成相关技术支持工作。在这里，你可以学习专业的摄影摄像技术和视频剪辑技巧，掌握新媒体运营方法，提升你的技术能力和综合素质。</p>
                
                <p>小福利：免费使用图书馆的摄影摄像设备和后期制作软件；有机会参与校内外各类活动的拍摄工作；学习专业的摄影摄像技术和视频剪辑技巧；你的作品将有机会在校内官方媒体平台展示。">
                    <div class="h-48 overflow-hidden relative">
                        <div class="absolute inset-0 bg-gradient-to-t from-[#e76f51]/80 to-transparent z-10"></div>
                        <img src="https://picsum.photos/seed/media/600/400" alt="媒体部" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                        <div class="absolute bottom-0 left-0 z-20 p-4 text-white">
                            <h3 class="text-xl font-bold">媒体部</h3>
                            <p class="text-white/80">技术先锋</p>
                        </div>
                    </div>
                    <div class="p-5 bg-white">
                        <div class="flex justify-between items-center mb-3">
                            <div class="flex space-x-2">
                                <span class="bg-[#e76f51]/10 text-[#e76f51] px-3 py-1 rounded-full text-sm">摄影摄像</span>
                                <span class="bg-[#e76f51]/10 text-[#e76f51] px-3 py-1 rounded-full text-sm">后期制作</span>
                            </div>
                            <span class="text-sm text-gray-500">适合人群：对媒体技术有兴趣、善于创新</span>
                        </div>
                        <p class="text-gray-600">负责活动记录、视频剪辑、平台运营，是学管会的"技术达人"。</p>
                    </div>
                </div>
                
                <!-- 督查部 -->
                <div class="department-card group rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer" data-name="督查部" data-img="https://picsum.photos/seed/supervision/600/400" data-desc="督查部是学管会的纪律保障，负责图书馆自习室的秩序维护、学管会成员的考勤管理以及各项活动的组织协调和现场秩序维护。确保图书馆有良好的学习环境，保障学管会各项工作的顺利开展。" data-color="departments.supervision" data-gallery="[
                    &quot;https://picsum.photos/seed/supervision1/800/1200&quot;,
                    &quot;https://picsum.photos/seed/supervision2/800/1200&quot;,
                    &quot;https://picsum.photos/seed/supervision3/800/1200&quot;
                ]" data-desc-details="督查部是学管会的纪律保障，负责图书馆自习室的秩序维护、学管会成员的考勤管理以及各项活动的组织协调和现场秩序维护。确保图书馆有良好的学习环境，保障学管会各项工作的顺利开展。
                <p>日常工作任务：图书馆自习室的秩序维护和巡查；学管会成员的考勤记录和管理；活动现场的组织协调和秩序维护；协助图书馆老师开展相关工作。在这里，你可以锻炼你的组织协调能力和沟通能力，培养你的责任心和团队合作精神。</p>
                
                <p>小福利：优先参与图书馆组织的各类培训和讲座；有机会与图书馆老师建立良好的关系；提升你的组织协调能力和责任心；获得更多的社会实践经验和综合素质的提升。">
                    <div class="h-48 overflow-hidden relative">
                        <div class="absolute inset-0 bg-gradient-to-t from-[#2a9d8f]/80 to-transparent z-10"></div>
                        <img src="https://picsum.photos/seed/supervision/600/400" alt="督查部" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                        <div class="absolute bottom-0 left-0 z-20 p-4 text-white">
                            <h3 class="text-xl font-bold">督查部</h3>
                            <p class="text-white/80">纪律保障</p>
                        </div>
                    </div>
                    <div class="p-5 bg-white">
                        <div class="flex justify-between items-center mb-3">
                            <div class="flex space-x-2">
                                <span class="bg-[#2a9d8f]/10 text-[#2a9d8f] px-3 py-1 rounded-full text-sm">责任心强</span>
                                <span class="bg-[#2a9d8f]/10 text-[#2a9d8f] px-3 py-1 rounded-full text-sm">组织协调</span>
                            </div>
                            <span class="text-sm text-gray-500">适合人群：做事认真负责、有耐心</span>
                        </div>
                        <p class="text-gray-600">负责秩序维护、考勤管理、活动督查，是学管会的"纪律委员"。</p>
                    </div>
                </div>
                
                <!-- 文化推广部 -->
                <div class="department-card group rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer" data-name="文化推广部" data-img="https://picsum.photos/seed/culture/600/400" data-desc="文化推广部是学管会的文化使者，负责策划和组织各类文化活动，如读书分享会、讲座、展览等，丰富同学们的课余文化生活，营造良好的校园文化氛围。" data-color="departments.culture" data-gallery="[
                    &quot;https://picsum.photos/seed/culture1/800/1200&quot;,
                    &quot;https://picsum.photos/seed/culture2/800/1200&quot;,
                    &quot;https://picsum.photos/seed/culture3/800/1200&quot;
                ]" data-desc-details="文化推广部是学管会的文化使者，负责策划和组织各类文化活动，如读书分享会、讲座、展览等，丰富同学们的课余文化生活，营造良好的校园文化氛围。
                <p>日常工作任务：策划和组织各类文化活动，如读书分享会、讲座、展览等；与校内外文化机构和社团合作，开展文化交流活动；挖掘和推广优秀的校园文化作品和人才。在这里，你可以发挥你的创意和组织能力，学习策划和组织大型活动的经验，提升你的文化素养和综合素质。</p>
                
                <p>小福利：优先参与图书馆组织的各类文化活动；有机会与校内外文化名人交流学习；提升你的组织协调能力和文化素养；你的活动策划将有机会在校内广泛开展，为校园文化建设做出贡献。">
                    <div class="h-48 overflow-hidden relative">
                        <div class="absolute inset-0 bg-gradient-to-t from-[#9b5de5]/80 to-transparent z-10"></div>
                        <img src="https://picsum.photos/seed/culture/600/400" alt="文化推广部" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                        <div class="absolute bottom-0 left-0 z-20 p-4 text-white">
                            <h3 class="text-xl font-bold">文化推广部</h3>
                            <p class="text-white/80">文化使者</p>
                        </div>
                    </div>
                    <div class="p-5 bg-white">
                        <div class="flex justify-between items-center mb-3">
                            <div class="flex space-x-2">
                                <span class="bg-[#9b5de5]/10 text-[#9b5de5] px-3 py-1 rounded-full text-sm">文化创意</span>
                                <span class="bg-[#9b5de5]/10 text-[#9b5de5] px-3 py-1 rounded-full text-sm">活动组织</span>
                            </div>
                            <span class="text-sm text-gray-500">适合人群：热爱文化活动、善于沟通</span>
                        </div>
                        <p class="text-gray-600">负责文化活动策划、组织与推广，是学管会的"文化大使"。</p>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 活动展示专栏 -->
        <section id="activities" class="bg-white/90 rounded-xl shadow-lg p-6 md:p-8 mb-12 animate-fade-in">
            <h2 class="text-2xl md:text-3xl font-bold text-primary mb-6 pb-4 border-b-4 border-secondary relative">
                活动展示
                <span class="absolute bottom-0 left-0 w-16 h-1 bg-accent"></span>
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 活动1 -->
                <div class="rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer activity-card" data-activity="1" data-title="书香校园读书分享会" data-desc="学管会的经典系列活动，旨在通过读书分享激发同学们的阅读兴趣，营造良好的校园读书氛围。活动邀请校内知名教师和优秀学生分享读书心得，同时设置书籍交换和读后感交流环节。" data-gallery="[
                    &quot;https://picsum.photos/seed/activity1-1/800/1200&quot;,
                    &quot;https://picsum.photos/seed/activity1-2/800/1200&quot;,
                    &quot;https://picsum.photos/seed/activity1-3/800/1200&quot;
                ]">
                    <div class="h-48 overflow-hidden">
                        <img src="https://picsum.photos/seed/activity1/600/400" alt="书香校园读书分享会" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-5 bg-white">
                        <div class="flex justify-between items-center mb-3">
                            <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">读书活动</span>
                            <span class="text-sm text-gray-500">2025.09.15</span>
                        </div>
                        <h3 class="text-xl font-bold mb-2">书香校园读书分享会</h3>
                        <p class="text-gray-600 mb-4">学管会的经典系列活动</p>
                        <a href="#" class="inline-flex items-center text-primary font-medium hover:underline">
                            查看详情 <i class="fa fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
                
                <!-- 活动2 -->
                <div class="rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer activity-card" data-activity="2" data-title="图书馆书山探宝" data-desc="学管会组织策划的大型图书馆趣味活动，参与者需要在规定时间内根据线索寻找指定图书。活动不仅考验同学们对图书馆布局的熟悉程度，还能提升信息检索能力，同时增添了图书馆学习的趣味性。" data-gallery="[
                    &quot;images/shushantanbao1.jpg&quot;,
                    &quot;images/shushantanbao2.jpg&quot;,
                    &quot;images/shushantanbao3.jpg&quot;,
                    &quot;images/shushantanbao4.jpg&quot;
                ]">
                    <div class="h-48 overflow-hidden">
                        <img src="images/shushantanbao5.jpg" alt="图书馆书山探宝" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-5 bg-white">
                        <div class="flex justify-between items-center mb-3">
                            <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">趣味活动</span>
                            <span class="text-sm text-gray-500">2025.10.20</span>
                        </div>
                        <h3 class="text-xl font-bold mb-2">图书馆书山探宝展示</h3>
                        <p class="text-gray-600 mb-4">学管会组织策划的大型图书馆趣味活动</p>
                        <a href="#" class="inline-flex items-center text-primary font-medium hover:underline">
                            查看详情 <i class="fa fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
                
                <!-- 活动3 -->
                <div class="rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer activity-card" data-activity="3" data-title="学管会活动展示" data-desc="学管会除了负责图书馆相关活动，同时内部也有一系列有趣的活动，如找书大赛，学管会联谊会等" data-gallery="[
                    &quot;images/lianyihui1.jpg&quot;,
                    &quot;images/lianyihui2.jpg&quot;,
                    &quot;images/lianyihui3.jpg&quot;
                ]">
                    <div class="h-48 overflow-hidden">
                        <img src="images/lianyihui4.jpg" alt="学管会活动展示" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-5 bg-white">
                        <div class="flex justify-between items-center mb-3">
                            <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">精彩纷呈</span>
                            <span class="text-sm text-gray-500">2025.11.05</span>
                        </div>
                        <h3 class="text-xl font-bold mb-2">学管会活动展示</h3>
                        <p class="text-gray-600 mb-4">由主席团策划的学管会团建活动</p>
                        <a href="#" class="inline-flex items-center text-primary font-medium hover:underline">
                            查看详情 <i class="fa fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-8">
                <a href="#" class="inline-block bg-primary hover:bg-primary/90 text-white font-bold py-3 px-8 rounded-full shadow-lg transform hover:scale-105 transition-all duration-300">
                    加入我们体验更多活动 <i class="fa fa-th-list ml-2"></i>
                </a>
            </div>
        </section>
        
        <!-- 部门团建模块 -->
        <section id="team-building" class="bg-white/90 rounded-xl shadow-lg p-6 md:p-8 mb-12 animate-fade-in">
            <h2 class="text-2xl md:text-3xl font-bold text-primary mb-6 pb-4 border-b-4 border-secondary relative">
                部门团建风采
                <span class="absolute bottom-0 left-0 w-16 h-1 bg-accent"></span>
            </h2>
            
            <p class="text-center text-gray-600 mb-8 max-w-2xl mx-auto">
                各部门定期组织团建活动，增进成员交流，培养团队凝聚力，一起来看看我们的精彩瞬间吧！
            </p>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 新闻部团建 -->
                <div class="team-card group rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer" data-department="新闻部" data-img="https://picsum.photos/seed/news-tb/600/400" data-desc="新闻部年度写作训练营" data-details="新闻部年度写作训练营在武夷山脚下的文创基地举办，为期两天一夜。活动包含新闻写作工作坊、户外采访实战、篝火故事会等环节。成员们在专业记者的指导下提升写作技巧，同时通过团队游戏增强默契。最后一晚的原创故事分享会感动了所有参与者，部门还为每位成员定制了印有个人笔名的笔记本作为纪念。" data-gallery="[
                    &quot;https://picsum.photos/seed/news-tb1/800/1200&quot;,
                    &quot;https://picsum.photos/seed/news-tb2/800/1200&quot;,
                    &quot;https://picsum.photos/seed/news-tb3/800/1200&quot;
                ]">
                    <div class="h-48 overflow-hidden relative">
                        <div class="absolute inset-0 bg-gradient-to-t from-[#3d5a80]/80 to-transparent z-10"></div>
                        <img src="https://picsum.photos/seed/news-tb/600/400" alt="新闻部团建" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                        <div class="absolute bottom-0 left-0 z-20 p-4 text-white">
                            <h3 class="text-xl font-bold">新闻部</h3>
                            <p class="text-white/80">写作训练营</p>
                        </div>
                    </div>
                    <div class="p-5 bg-white">
                        <p class="text-gray-600 line-clamp-2">新闻部组织的写作能力提升团建活动，在自然中激发创作灵感</p>
                    </div>
                </div>
                
                <!-- 办公室团建 -->
                <div class="team-card group rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer" data-department="办公室" data-img="images/Image_191653411990012.jpg" data-desc="玩偶天团集体出道" data-details="这个办公室玩偶天团背后的故事可不简单！快来加入我们办公室的大家庭吧，这里有超温柔的学姐，很暖心的学长，还有一群很好的部门同事，想要找一个很温馨的部门吗？快来加入我们吧！（悄悄告诉你一个秘密加入办公室能解锁很多惊喜）" data-gallery="[
                    &quot;images/bangongshituanjian1.jpg&quot;,
                    &quot;images/bangongshituanjian2.jpg&quot;,
                    &quot;images/bangongshituanjian3.jpg&quot;
                ]">
                    <div class="h-48 overflow-hidden relative">
                        <div class="absolute inset-0 bg-gradient-to-t from-[#e9c46a]/80 to-transparent z-10"></div>
                        <img src="images/Image_191653411990012.jpg" alt="办公室团建" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                        <div class="absolute bottom-0 left-0 z-20 p-4 text-white">
                            <h3 class="text-xl font-bold">办公室</h3>
                            <p class="text-white/80">其乐融融大家庭</p>
                        </div>
                    </div>
                    <div class="p-5 bg-white">
                        <p class="text-gray-600 line-clamp-2">想要知道这个玩偶大家庭的故事吗？！</p>
                    </div>
                </div>
                
                <!-- 宣传部团建 -->
                <div class="team-card group rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer" data-department="宣传部" data-img="https://picsum.photos/seed/publicity-tb/600/400" data-desc="宣传部创意工坊" data-details="宣传部创意工坊在图书馆创客空间举办，邀请了专业设计师进行现场指导。成员们分组完成主题海报设计挑战，从创意构思到完稿展示全程协作。活动特别设置了'废物改造'环节，用回收材料制作艺术装置，最终作品在图书馆大厅展出。团建结束后，部门还为每位成员制作了个人作品集，记录成长轨迹。" data-gallery="[
                    &quot;https://picsum.photos/seed/publicity-tb1/800/1200&quot;,
                    &quot;https://picsum.photos/seed/publicity-tb2/800/1200&quot;,
                    &quot;https://picsum.photos/seed/publicity-tb3/800/1200&quot;
                ]">
                    <div class="h-48 overflow-hidden relative">
                        <div class="absolute inset-0 bg-gradient-to-t from-[#f4a261]/80 to-transparent z-10"></div>
                        <img src="https://picsum.photos/seed/publicity-tb/600/400" alt="宣传部团建" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                        <div class="absolute bottom-0 left-0 z-20 p-4 text-white">
                            <h3 class="text-xl font-bold">宣传部</h3>
                            <p class="text-white/80">创意工坊</p>
                        </div>
                    </div>
                    <div class="p-5 bg-white">
                        <p class="text-gray-600 line-clamp-2">设计师指导的创意集训，在实践中提升设计能力</p>
                    </div>
                </div>
                
                <!-- 媒体部团建 -->
                <div class="team-card group rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer" data-department="媒体部" data-img="https://picsum.photos/seed/media-tb/600/400" data-desc="媒体部摄影采风" data-details="媒体部摄影采风活动前往武夷山国家公园，进行为期一天的外拍实践。成员们在专业摄影师带领下学习风光摄影技巧，分组完成'光影武夷'主题创作。活动中设置了摄影挑战赛，优秀作品在图书馆数字屏展出。晚上的作品交流会中，成员们分享拍摄心得，部门还为每人准备了定制镜头布和摄影笔记手册。" data-gallery="[
                    &quot;https://picsum.photos/seed/media-tb1/800/1200&quot;,
                    &quot;https://picsum.photos/seed/media-tb2/800/1200&quot;,
                    &quot;https://picsum.photos/seed/media-tb3/800/1200&quot;
                ]">
                    <div class="h-48 overflow-hidden relative">
                        <div class="absolute inset-0 bg-gradient-to-t from-[#e76f51]/80 to-transparent z-10"></div>
                        <img src="https://picsum.photos/seed/media-tb/600/400" alt="媒体部团建" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                        <div class="absolute bottom-0 left-0 z-20 p-4 text-white">
                            <h3 class="text-xl font-bold">媒体部</h3>
                            <p class="text-white/80">摄影采风</p>
                        </div>
                    </div>
                    <div class="p-5 bg-white">
                        <p class="text-gray-600 line-clamp-2">武夷山外拍实践，提升摄影技术与艺术审美</p>
                    </div>
                </div>
                
                <!-- 督查部团建 -->
                <div class="team-card group rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer" data-department="督查部" data-img="https://picsum.photos/seed/supervision-tb/600/400" data-desc="督查部素质拓展" data-details="督查部素质拓展活动在学校拓展训练基地开展，包含高空断桥、信任背摔、真人CS等经典项目。作为负责纪律保障的部门，成员们在活动中展现了强大的执行力和团队信任。特别设置的'图书馆秩序管理情景剧'环节，让成员们通过角色扮演理解工作中的沟通技巧。活动最后，部门为每位成员颁发了'团队之星'证书。" data-gallery="[
                    &quot;https://picsum.photos/seed/supervision-tb1/800/1200&quot;,
                    &quot;https://picsum.photos/seed/supervision-tb2/800/1200&quot;,
                    &quot;https://picsum.photos/seed/supervision-tb3/800/1200&quot;
                ]">
                    <div class="h-48 overflow-hidden relative">
                        <div class="absolute inset-0 bg-gradient-to-t from-[#2a9d8f]/80 to-transparent z-10"></div>
                        <img src="https://picsum.photos/seed/supervision-tb/600/400" alt="督查部团建" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                        <div class="absolute bottom-0 left-0 z-20 p-4 text-white">
                            <h3 class="text-xl font-bold">督查部</h3>
                            <p class="text-white/80">素质拓展</p>
                        </div>
                    </div>
                    <div class="p-5 bg-white">
                        <p class="text-gray-600 line-clamp-2">拓展训练基地活动，强化团队协作与执行力</p>
                    </div>
                </div>
                
                <!-- 文化推广部团建 -->
                <div class="team-card group rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer" data-department="文化推广部" data-img="https://picsum.photos/seed/culture-tb/600/400" data-desc="文化推广部文化之旅" data-details="文化推广部文化之旅前往福建博物院，进行为期两天的文化探索。成员们参观了'福建古代文明'等主题展览，参与了拓印、雕版印刷等非遗体验活动。特别邀请了博物院研究员开展'校园文化活动策划'专题讲座。晚上的'文化创意市集'环节，成员们用收集的素材制作手工艺品并进行义卖，所得款项捐赠给校图书馆购书基金。" data-gallery="[
                    &quot;https://picsum.photos/seed/culture-tb1/800/1200&quot;,
                    &quot;https://picsum.photos/seed/culture-tb2/800/1200&quot;,
                    &quot;https://picsum.photos/seed/culture-tb3/800/1200&quot;
                ]">
                    <div class="h-48 overflow-hidden relative">
                        <div class="absolute inset-0 bg-gradient-to-t from-[#9b5de5]/80 to-transparent z-10"></div>
                        <img src="https://picsum.photos/seed/culture-tb/600/400" alt="文化推广部团建" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                        <div class="absolute bottom-0 left-0 z-20 p-4 text-white">
                            <h3 class="text-xl font-bold">文化推广部</h3>
                            <p class="text-white/80">文化之旅</p>
                        </div>
                    </div>
                    <div class="p-5 bg-white">
                        <p class="text-gray-600 line-clamp-2">博物院文化探索，汲取灵感策划校园活动</p>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 招新详情 -->
        <section id="recruitment" class="bg-white/90 rounded-xl shadow-lg p-6 md:p-8 mb-12 animate-fade-in">
            <h2 class="text-2xl md:text-3xl font-bold text-primary mb-6 pb-4 border-b-4 border-secondary relative">
                招新详情
                <span class="absolute bottom-0 left-0 w-16 h-1 bg-accent"></span>
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                    <h3 class="text-xl font-bold mb-4 text-primary">招新对象</h3>
                    <p class="mb-4">武夷学院全体在校学生，尤其是大一新生，欢迎踊跃报名！</p>
                    
                    <h3 class="text-xl font-bold mb-4 text-primary">招新流程</h3>
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <div class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mt-1">1</div>
                            <div class="ml-4">
                                <h4 class="font-bold">线上报名</h4>
                                <p class="text-gray-600">填写在线报名表（点击下方"加入我们"）</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mt-1">2</div>
                            <div class="ml-4">
                                <h4 class="font-bold">初试</h4>
                                <p class="text-gray-600">提交报名表后，我们将通过短信或电话通知您参加初试</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mt-1">3</div>
                            <div class="ml-4">
                                <h4 class="font-bold">复试</h4>
                                <p class="text-gray-600">初试通过者将进入复试环节</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mt-1">4</div>
                            <div class="ml-4">
                                <h4 class="font-bold">公示名单</h4>
                                <p class="text-gray-600">最终入选名单将在图书馆官网和公众号公示</p>
                            </div>
                        </div>
                    </div>
                    
                    <h3 class="text-xl font-bold mb-4 text-primary mt-8">招新时间</h3>
                    <p class="mb-2">线上报名：2025年x月x日 - x月x日</p>
                    <p class="mb-2">初试时间：2025年x月x日 - x月x日</p>
                    <p class="mb-2">复试时间：具体通知</p>
                    <p>公示时间：具体通知</p>
                </div>
                
                <div>
                    <h3 class="text-xl font-bold mb-4 text-primary">我们的收获</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div class="bg-primary/5 p-4 rounded-lg">
                            <i class="fa fa-graduation-cap text-3xl text-primary mb-3"></i>
                            <h4 class="font-bold mb-2">技能提升</h4>
                            <p class="text-gray-600">学习各种实用技能，提升综合素质</p>
                        </div>
                        <div class="bg-primary/5 p-4 rounded-lg">
                            <i class="fa fa-users text-3xl text-primary mb-3"></i>
                            <h4 class="font-bold mb-2">人脉拓展</h4>
                            <p class="text-gray-600">结识志同道合的朋友，拓展人际关系</p>
                        </div>
                        <div class="bg-primary/5 p-4 rounded-lg">
                            <i class="fa fa-certificate text-3xl text-primary mb-3"></i>
                            <h4 class="font-bold mb-2">实践经验</h4>
                            <p class="text-gray-600">积累丰富的实践经验，为未来发展打下基础</p>
                        </div>
                        <div class="bg-primary/5 p-4 rounded-lg">
                            <i class="fa fa-heart text-3xl text-primary mb-3"></i>
                            <h4 class="font-bold mb-2">团队归属感</h4>
                            <p class="text-gray-600">加入温馨的大家庭，感受团队的温暖和力量</p>
                        </div>
                    </div>
                    
                    <h3 class="text-xl font-bold mb-4 text-primary mt-8">常见问题</h3>
                    <div class="space-y-4">
                        <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow duration-300">
                            <h4 class="font-bold mb-2 flex justify-between items-center">
                                <span>学管会的工作会影响学习吗？</span>
                                <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300"></i>
                            </h4>
                            <p class="text-gray-600">学管会的工作安排会充分考虑同学们的学习时间，我们提倡学习与工作两不误。在学管会的经历可以锻炼你的时间管理能力和综合素质，反而有助于提高学习效率。</p>
                        </div>
                        <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow duration-300">
                            <h4 class="font-bold mb-2 flex justify-between items-center">
                                <span>没有相关经验可以加入吗？</span>
                                <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300"></i>
                            </h4>
                            <p class="text-gray-600">当然可以！我们欢迎所有有热情、有责任心的同学加入。对于没有经验的同学，我们会提供系统的培训和指导，帮助你快速成长。</p>
                        </div>
                        <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow duration-300">
                            <h4 class="font-bold mb-2 flex justify-between items-center">
                                <span>可以同时加入多个部门吗？</span>
                                <i class="fa fa-chevron-down text-gray-400 transition-transform duration-300"></i>
                            </h4>
                            <p class="text-gray-600">为了保证工作质量和个人发展，我们建议每位同学选择1-2个最感兴趣的部门加入。</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 加入我们 -->
        <section id="contact" class="bg-white/90 rounded-xl shadow-lg p-6 md:p-8 mb-12 animate-fade-in">
            <h2 class="text-2xl md:text-3xl font-bold text-primary mb-6 pb-4 border-b-4 border-secondary relative">
                加入我们
                <span class="absolute bottom-0 left-0 w-16 h-1 bg-accent"></span>
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
                <div>
                    <h3 class="text-xl font-bold mb-4 text-primary">扫描二维码关注我们</h3>
                    <p class="mb-6">扫描下方二维码，关注图书馆学生管理委员会公众号，获取更多招新信息和校园动态。</p>
                    
                    <div class="bg-white p-6 rounded-xl shadow-md inline-block">
                        <!-- 这里是一个模拟的二维码图片 -->
                        <div class="w-64 h-64 bg-gray-100 flex items-center justify-center">
                            <svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                <rect width="200" height="200" fill="white"/>
                                <!-- 简单的二维码图案 -->
                                <rect x="20" y="20" width="20" height="20" fill="#1a4b8c"/>
                                <rect x="60" y="20" width="20" height="20" fill="#1a4b8c"/>
                                <rect x="100" y="20" width="60" height="20" fill="#1a4b8c"/>
                                <rect x="20" y="60" width="20" height="60" fill="#1a4b8c"/>
                                <rect x="60" y="60" width="20" height="20" fill="#1a4b8c"/>
                                <rect x="100" y="60" width="20" height="20" fill="#1a4b8c"/>
                                <rect x="140" y="60" width="20" height="20" fill="#1a4b8c"/>
                                <rect x="60" y="100" width="20" height="20" fill="#1a4b8c"/>
                                <rect x="100" y="100" width="20" height="60" fill="#1a4b8c"/>
                                <rect x="140" y="100" width="20" height="20" fill="#1a4b8c"/>
                                <rect x="20" y="140" width="120" height="20" fill="#1a4b8c"/>
                                <rect x="160" y="140" width="20" height="20" fill="#1a4b8c"/>
                                <rect x="20" y="180" width="20" height="20" fill="#1a4b8c"/>
                                <rect x="60" y="180" width="20" height="20" fill="#1a4b8c"/>
                                <rect x="100" y="180" width="60" height="20" fill="#1a4b8c"/>
                            </svg>
                        </div>
                        
                        <p class="text-center mt-4 font-medium">武夷学院图书馆学管会</p>
                    </div>
                    
                    <div class="mt-8">
                        <h4 class="font-bold mb-2">联系方式</h4>
                        <p class="flex items-center mb-2">
                            <i class="fa fa-envelope text-primary mr-2"></i>
                            <span>library@wuyiu.edu.cn</span>
                        </p>
                        <p class="flex items-center mb-2">
                            <i class="fa fa-phone text-primary mr-2"></i>
                            <span>QQ群：XXXXXXXX</span>
                        </p>
                        <p class="flex items-center">
                            <i class="fa fa-map-marker text-primary mr-2"></i>
                            <span>武夷学院图书馆二楼学管会办公室</span>
                        </p>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-xl font-bold mb-4 text-primary">招新寄语</h3>
                    <p class="mb-4">如果你热爱图书馆，想为同学们创造更好的学习环境；如果你有热情、有责任心，想锻炼自己的能力；如果你渴望结交更多志同道合的朋友，那么加入我们吧！</p>
                    <p class="mb-4">武夷学院图书馆学生管理委员会期待你的加入，让我们一起成长，共同创造美好的校园回忆！</p>
                    
                    <div class="bg-primary/5 p-6 rounded-xl mt-6">
                        <h4 class="font-bold mb-2 text-primary">我们的优势</h4>
                        <ul class="space-y-2">
                            <li class="flex items-start">
                                <i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                                
                                <span>提供丰富活动参与经验，帮助你快速成长</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                                <span>创造良好的工作环境，让你在快乐中学习和成长</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                                <span>完成活动有相应的素拓分、志愿时长，让你的努力得到回报</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                                <span>丰富的团建活动，让你感受到家的温暖</span>
                            </li>
                        </ul>
                    </div>
                    
                   
                    </a>
                </div>
            </div>
        </section>
    </main>
    
    <!-- 页脚 -->
    <footer class="bg-primary text-white py-10">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-3 mb-4">
                        <div class="w-10 h-10 rounded-full bg-secondary flex items-center justify-center text-primary font-bold text-lg">WY</div>
                        <h3 class="text-xl font-bold">武夷学院图书馆学管会</h3>
                    </div>
                    <p class="text-white/80">全心全意为同学服务，营造良好学习氛围</p>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-4">快速链接</h4>
                    <ul class="space-y-2">
                        <li><a href="#home" class="text-white/80 hover:text-white transition-colors duration-300">首页</a></li>
                        <li><a href="#departments" class="text-white/80 hover:text-white transition-colors duration-300">部门介绍</a></li>
                        <li><a href="#activities" class="text-white/80 hover:text-white transition-colors duration-300">活动展示</a></li>
                        <li><a href="#team-building" class="text-white/80 hover:text-white transition-colors duration-300">团建风采</a></li>
                        <li><a href="#recruitment" class="text-white/80 hover:text-white transition-colors duration-300">招新详情</a></li>
                        <li><a href="#contact" class="text-white/80 hover:text-white transition-colors duration-300">加入我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-4">联系我们</h4>
                    <ul class="space-y-2">
                        <li class="flex items-center">
                            <i class="fa fa-envelope mr-2 text-secondary"></i>
                            <span class="text-white/80">library@wuyiu.edu.cn</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone mr-2 text-secondary"></i>
                            <span class="text-white/80">QQ群：XXXXXXXXX</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-map-marker mr-2 text-secondary"></i>
                            <span class="text-white/80">武夷学院图书馆二楼学管会办公室</span>
                        </li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-4">关注我们</h4>
                    <p class="text-white/80 mb-4">扫描二维码，关注我们的官方公众号</p>
                    <div class="bg-white p-3 inline-block rounded-lg">
                        <!-- 模拟公众号二维码 -->
                        <div class="w-32 h-32 bg-gray-100 flex items-center justify-center">
                            <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                                <rect width="100" height="100" fill="white"/>
                                <rect x="10" y="10" width="10" height="10" fill="#1a4b8c"/>
                                <rect x="30" y="10" width="10" height="10" fill="#1a4b8c"/>
                                <rect x="50" y="10" width="20" height="10" fill="#1a4b8c"/>
                                <rect x="10" y="30" width="10" height="10" fill="#1a4b8c"/>
                                <rect x="30" y="30" width="10" height="10" fill="#1a4b8c"/>
                                <rect x="50" y="30" width="10" height="10" fill="#1a4b8c"/>
                                <rect x="70" y="30" width="10" height="10" fill="#1a4b8c"/>
                                <rect x="30" y="50" width="10" height="10" fill="#1a4b8c"/>
                                <rect x="50" y="50" width="10" height="20" fill="#1a4b8c"/>
                                <rect x="70" y="50" width="10" height="10" fill="#1a4b8c"/>
                                <rect x="10" y="70" width="40" height="10" fill="#1a4b8c"/>
                                <rect x="70" y="70" width="10" height="10" fill="#1a4b8c"/>
                                <rect x="10" y="90" width="10" height="10" fill="#1a4b8c"/>
                                <rect x="30" y="90" width="10" height="10" fill="#1a4b8c"/>
                                <rect x="50" y="90" width="20" height="10" fill="#1a4b8c"/>
                            </svg>
                        </div>
                        <p class="text-center text-sm mt-2">武夷学管会</p>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-white/20 mt-8 pt-6 text-center text-white/60">
                <p>© 2025 武夷学院图书馆学生管理委员会. 保留所有权利.</p>
            </div>
        </div>
    </footer>
    
    <!-- 部门详情弹窗 -->
    <div id="department-modal" class="fixed inset-0 bg-black/70 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300 modal-fade-out">
        <div class="modal-content relative p-6 animate-fade-in">
            <button id="close-department-modal" class="modal-close">
                <i class="fa fa-times text-xl"></i>
            </button>
            <h2 id="department-modal-title" class="modal-title text-primary"></h2>
            <div class="mb-6">
                <img id="department-modal-image" src="" alt="" class="modal-image w-full rounded-lg">
            </div>
            <div id="department-modal-desc" class="modal-desc"></div>
            
            <h3 class="text-xl font-bold mb-4 text-primary">部门风采</h3>
            <div id="department-gallery" class="gallery-container"></div>
            
            <div class="mt-8 text-center">
                <a href="#contact" class="inline-block bg-primary hover:bg-primary/90 text-white font-bold py-2 px-6 rounded-full shadow-md transition-all duration-300">
                    申请加入 <i class="fa fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </div>
    
    <!-- 活动详情弹窗 -->
    <div id="activity-modal" class="fixed inset-0 bg-black/70 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300 modal-fade-out">
        <div class="modal-content relative p-6 animate-fade-in">
            <button id="close-activity-modal" class="modal-close">
                <i class="fa fa-times text-xl"></i>
            </button>
            <h2 id="activity-modal-title" class="modal-title text-primary"></h2>
            <div class="mb-6">
                <img id="activity-modal-image" src="" alt="" class="modal-image w-full rounded-lg">
            </div>
            <div id="activity-modal-desc" class="modal-desc"></div>
            
            <h3 class="text-xl font-bold mb-4 text-primary">活动精彩瞬间</h3>
            <div id="activity-gallery" class="gallery-container"></div>
        </div>
    </div>
    
    <!-- 团建详情弹窗 -->
    <div id="team-modal" class="fixed inset-0 bg-black/70 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300 modal-fade-out">
        <div class="modal-content relative p-6 animate-fade-in">
            <button id="close-team-modal" class="modal-close">
                <i class="fa fa-times text-xl"></i>
            </button>
            <h2 id="team-modal-title" class="modal-title text-primary"></h2>
            <div class="mb-6">
                <img id="team-modal-image" src="" alt="" class="modal-image w-full rounded-lg">
            </div>
            <div id="team-modal-desc" class="modal-desc"></div>
            
            <h3 class="text-xl font-bold mb-4 text-primary">团建精彩瞬间</h3>
            <div id="team-gallery" class="gallery-container"></div>
        </div>
    </div>
    
    <!-- 大图查看弹窗 -->
    <div id="image-viewer" class="fixed inset-0 bg-black z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300">
        <button id="close-image-viewer" class="absolute top-6 right-6 text-white text-3xl hover:text-secondary transition-colors duration-300 z-10">
            <i class="fa fa-times"></i>
        </button>
        <button id="prev-image" class="absolute left-6 top-1/2 transform -translate-y-1/2 text-white text-3xl hover:text-secondary transition-colors duration-300 z-10">
            <i class="fa fa-angle-left"></i>
        </button>
        <button id="next-image" class="absolute right-6 top-1/2 transform -translate-y-1/2 text-white text-3xl hover:text-secondary transition-colors duration-300 z-10">
            <i class="fa fa-angle-right"></i>
        </button>
        <div class="text-white text-2xl mb-4 z-10" id="image-counter">1/1</div>
        <img id="viewer-image" src="" alt="" class="max-w-5xl max-h-[80vh] object-contain">
    </div>

    <script>
        // 移动端菜单切换
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        
        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
            if (mobileMenuButton.innerHTML.includes('fa-bars')) {
                mobileMenuButton.innerHTML = '<i class="fa fa-times"></i>';
            } else {
                mobileMenuButton.innerHTML = '<i class="fa fa-bars"></i>';
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    
                    // 关闭移动端菜单
                    if (!mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                        mobileMenuButton.innerHTML = '<i class="fa fa-bars"></i>';
                    }
                }
            });
        });
        
        // 部门卡片点击事件
        const departmentCards = document.querySelectorAll('.department-card');
        const departmentModal = document.getElementById('department-modal');
        const closeDepartmentModal = document.getElementById('close-department-modal');
        const departmentModalTitle = document.getElementById('department-modal-title');
        const departmentModalImage = document.getElementById('department-modal-image');
        const departmentModalDesc = document.getElementById('department-modal-desc');
        const departmentGallery = document.getElementById('department-gallery');
        
        departmentCards.forEach(card => {
            card.addEventListener('click', () => {
                const name = card.getAttribute('data-name');
                const img = card.getAttribute('data-img');
                const desc = card.getAttribute('data-desc-details');
                const gallery = JSON.parse(card.getAttribute('data-gallery'));
                const color = card.getAttribute('data-color');
                
                departmentModalTitle.textContent = name;
                departmentModalImage.src = img;
                departmentModalImage.alt = name;
                departmentModalDesc.innerHTML = desc;
                departmentGallery.innerHTML = '';
                
                // 设置标题颜色
                departmentModalTitle.style.color = color;
                
                // 生成图片画廊
                gallery.forEach((image, index) => {
                    const galleryItem = document.createElement('div');
                    galleryItem.className = `gallery-item relative`;
                    galleryItem.innerHTML = `
                        <img src="${image}" alt="${name} 风采" class="w-full h-40 object-cover rounded-lg cursor-pointer" data-index="${index}">
                        <div class="absolute inset-0 bg-black/30 opacity-0 hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                            <i class="fa fa-search-plus text-white text-2xl"></i>
                        </div>
                    `;
                    galleryItem.addEventListener('click', () => {
                        openImageViewer(gallery, index);
                    });
                    departmentGallery.appendChild(galleryItem);
                });
                
                // 显示弹窗
                departmentModal.classList.remove('modal-fade-out');
                departmentModal.classList.add('modal-fade-in');
                setTimeout(() => {
                    departmentModal.style.opacity = '1';
                    departmentModal.style.pointerEvents = 'auto';
                }, 10);
            });
        });
        
        // 活动卡片点击事件
        const activityCards = document.querySelectorAll('.activity-card');
        const activityModal = document.getElementById('activity-modal');
        const closeActivityModal = document.getElementById('close-activity-modal');
        const activityModalTitle = document.getElementById('activity-modal-title');
        const activityModalImage = document.getElementById('activity-modal-image');
        const activityModalDesc = document.getElementById('activity-modal-desc');
        const activityGallery = document.getElementById('activity-gallery');
        
        activityCards.forEach(card => {
            card.addEventListener('click', () => {
                const title = card.getAttribute('data-title');
                const img = card.getAttribute('data-img');
                const desc = card.getAttribute('data-desc');
                const gallery = JSON.parse(card.getAttribute('data-gallery'));
                
                activityModalTitle.textContent = title;
                activityModalImage.src = img;
                activityModalImage.alt = title;
                activityModalDesc.textContent = desc;
                activityGallery.innerHTML = '';
                
                // 生成图片画廊
                gallery.forEach((image, index) => {
                    const galleryItem = document.createElement('div');
                    galleryItem.className = `gallery-item relative`;
                    galleryItem.innerHTML = `
                        <img src="${image}" alt="${title} 精彩瞬间" class="w-full h-40 object-cover rounded-lg cursor-pointer" data-index="${index}">
                        <div class="absolute inset-0 bg-black/30 opacity-0 hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                            <i class="fa fa-search-plus text-white text-2xl"></i>
                        </div>
                    `;
                    galleryItem.addEventListener('click', () => {
                        openImageViewer(gallery, index);
                    });
                    activityGallery.appendChild(galleryItem);
                });
                
                // 显示弹窗
                activityModal.classList.remove('modal-fade-out');
                activityModal.classList.add('modal-fade-in');
                setTimeout(() => {
                    activityModal.style.opacity = '1';
                    activityModal.style.pointerEvents = 'auto';
                }, 10);
            });
        });
        
        // 团建卡片点击事件
        const teamCards = document.querySelectorAll('.team-card');
        const teamModal = document.getElementById('team-modal');
        const closeTeamModal = document.getElementById('close-team-modal');
        const teamModalTitle = document.getElementById('team-modal-title');
        const teamModalImage = document.getElementById('team-modal-image');
        const teamModalDesc = document.getElementById('team-modal-desc');
        const teamGallery = document.getElementById('team-gallery');
        
        teamCards.forEach(card => {
            card.addEventListener('click', () => {
                const department = card.getAttribute('data-department');
                const title = card.getAttribute('data-desc');
                const img = card.getAttribute('data-img');
                const details = card.getAttribute('data-details');
                const gallery = JSON.parse(card.getAttribute('data-gallery'));
                
                teamModalTitle.textContent = `${department} - ${title}`;
                teamModalImage.src = img;
                teamModalImage.alt = `${department} 团建`;
                teamModalDesc.innerHTML = details;
                teamGallery.innerHTML = '';
                
                // 生成图片画廊
                gallery.forEach((image, index) => {
                    const galleryItem = document.createElement('div');
                    galleryItem.className = `gallery-item relative`;
                    galleryItem.innerHTML = `
                        <img src="${image}" alt="${department} ${title} 精彩瞬间" class="w-full h-40 object-cover rounded-lg cursor-pointer" data-index="${index}">
                        <div class="absolute inset-0 bg-black/30 opacity-0 hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                            <i class="fa fa-search-plus text-white text-2xl"></i>
                        </div>
                    `;
                    galleryItem.addEventListener('click', () => {
                        openImageViewer(gallery, index);
                    });
                    teamGallery.appendChild(galleryItem);
                });
                
                // 显示弹窗
                teamModal.classList.remove('modal-fade-out');
                teamModal.classList.add('modal-fade-in');
                setTimeout(() => {
                    teamModal.style.opacity = '1';
                    teamModal.style.pointerEvents = 'auto';
                }, 10);
            });
        });
        
        // 关闭部门弹窗
        closeDepartmentModal.addEventListener('click', closeDepartmentModalFunc);
        closeActivityModal.addEventListener('click', closeActivityModalFunc);
        closeTeamModal.addEventListener('click', closeTeamModalFunc);
        
        function closeDepartmentModalFunc() {
            departmentModal.style.opacity = '0';
            departmentModal.style.pointerEvents = 'none';
            departmentModal.classList.remove('modal-fade-in');
            departmentModal.classList.add('modal-fade-out');
        }
        
        function closeActivityModalFunc() {
            activityModal.style.opacity = '0';
            activityModal.style.pointerEvents = 'none';
            activityModal.classList.remove('modal-fade-in');
            activityModal.classList.add('modal-fade-out');
        }
        
        function closeTeamModalFunc() {
            teamModal.style.opacity = '0';
            teamModal.style.pointerEvents = 'none';
            teamModal.classList.remove('modal-fade-in');
            teamModal.classList.add('modal-fade-out');
        }
        
        // 点击弹窗背景关闭弹窗
        departmentModal.addEventListener('click', (e) => {
            if (e.target === departmentModal) {
                closeDepartmentModalFunc();
            }
        });
        
        activityModal.addEventListener('click', (e) => {
            if (e.target === activityModal) {
                closeActivityModalFunc();
            }
        });
        
        teamModal.addEventListener('click', (e) => {
            if (e.target === teamModal) {
                closeTeamModalFunc();
            }
        });
        
        // 图片查看器
        const imageViewer = document.getElementById('image-viewer');
        const closeImageViewer = document.getElementById('close-image-viewer');
        const viewerImage = document.getElementById('viewer-image');
        const prevImage = document.getElementById('prev-image');
        const nextImage = document.getElementById('next-image');
        const imageCounter = document.getElementById('image-counter');
        
        let currentGallery = [];
        let currentImageIndex = 0;
        
        function openImageViewer(gallery, index) {
            currentGallery = gallery;
            currentImageIndex = index;
            viewerImage.src = gallery[index];
            viewerImage.alt = `查看大图`;
            updateImageCounter();
            
            imageViewer.style.opacity = '1';
            imageViewer.style.pointerEvents = 'auto';
            document.body.style.overflow = 'hidden';
        }
        
        function updateImageCounter() {
            imageCounter.textContent = `${currentImageIndex + 1}/${currentGallery.length}`;
        }
        
        closeImageViewer.addEventListener('click', () => {
            imageViewer.style.opacity = '0';
            imageViewer.style.pointerEvents = 'none';
            document.body.style.overflow = '';
        });
        
        prevImage.addEventListener('click', () => {
            currentImageIndex = (currentImageIndex - 1 + currentGallery.length) % currentGallery.length;
            viewerImage.src = currentGallery[currentImageIndex];
            updateImageCounter();
        });
        
        nextImage.addEventListener('click', () => {
            currentImageIndex = (currentImageIndex + 1) % currentGallery.length;
            viewerImage.src = currentGallery[currentImageIndex];
            updateImageCounter();
        });
        
        imageViewer.addEventListener('click', (e) => {
            if (e.target === imageViewer) {
                closeImageViewer.click();
            }
        });
        
        // ESC键关闭所有弹窗
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                if (!departmentModal.classList.contains('modal-fade-out')) {
                    closeDepartmentModalFunc();
                } else if (!activityModal.classList.contains('modal-fade-out')) {
                    closeActivityModalFunc();
                } else if (!teamModal.classList.contains('modal-fade-out')) {
                    closeTeamModalFunc();
                } else if (imageViewer.style.opacity === '1') {
                    closeImageViewer.click();
                }
            }
        });
        
        // 导航栏滚动效果
        const header = document.querySelector('header');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                header.classList.add('py-2');
                header.classList.remove('py-3');
            } else {
                header.classList.add('py-3');
                header.classList.remove('py-2');
            }
        });
        
        // 初始化动画元素
        const animateElements = document.querySelectorAll('.animate-fade-in');
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, {
            threshold: 0.1
        });
        
        animateElements.forEach(element => {
            element.style.opacity = '0';
            element.style.transform = 'translateY(20px)';
            element.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';
            observer.observe(element);
        });
    </script>
</body>
</html>